<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
      <el-breadcrumb-item to="/home/spumanage/spuaccount"
        >商品管理</el-breadcrumb-item
      >
      <el-breadcrumb-item to="/home/spumanage/albummanage"
        >相册管理</el-breadcrumb-item
      >
      <el-breadcrumb-item>图片管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>

    <div class="box">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <h3 style="line-height: 32px">
              <i class="el-icon-s-tools"></i> &nbsp; 图片管理
            </h3>
          </div>
        </el-col>
        <el-col :span="16" style="text-align: right">
          <div class="grid-content bg-purple">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-circle-plus-outline"
              >批量选择</el-button
            >
          </div>
        </el-col>
      </el-row>

      <div class="divider"></div>

      <div class="namerow">{{ albumInfo.name }} ({{ total }}张)</div>
      <el-row class="descrow">
        {{ albumInfo.description }}
      </el-row>
      <el-row class="bzrow">
        <p>1. 单图图片尺寸为：300*300，文件大小不得超过300k</p>
        <p>2. 商城前端最多展示10张图片</p>
      </el-row>
    </div>

    <div class="box" style="background: #f9f9f9">
      <photo-pic-item
        v-for="(item, i) in pics"
        :key="i"
        :index="i + 1"
        :currentPic="item"
        @coverChanged="handleCoverChanged"
      ></photo-pic-item>

      <div class="pagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          layout="total, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import photoPicItem from "@/components/PhotoPicItem.vue";
export default {
  components: {
    photoPicItem,
  },
  data() {
    return {
      albumInfo: {}, // 描述当前相册的详情
      pics: [], // 表示当前图片列表
      currentPage: 1, // 表示当前页码
      pageSize: 10, // 表示每页多少条
      total: 1, // 表示总条目数

      cuser: {},
      editDialogVisible: false,
      roleDialogVisible: false,
      search: "",
      selectRoles: "",

      input: "",
      value: "",
      options: [
        {
          value: "enable",
          label: "启用",
        },
        {
          value: "disable",
          label: "禁用",
        },
      ],
    };
  },
  mounted() {
    let albumId = this.$route.params.albumId;
    console.log(albumId);
    // 加载当前相册详情
    this.albumApi.queryById({ id: albumId }).then((res) => {
      console.log("读取相册详情", res);
      if(res.data.state==200){
        this.albumInfo = res.data.data;
        // 加载相册中的图片列表
        this.loadPics();
      }else{
        this.$alert(res.data.message, '提示')
      }
    });
  },
  methods: {
    /** 处理封面图片变更事件 */
    handleCoverChanged() {
      this.loadPics();
    },

    /** 加载相册中的图片列表 */
    loadPics() {
      let albumId = this.albumInfo.id;
      let page = this.currentPage;
      let pageSize = this.pageSize;
      this.picturesApi
        .queryByAlbumId({ albumId, page, pageSize })
        .then((res) => {
          console.log("加载相册中的图片列表", res);
          if(res.data.state==200){
            this.pics = res.data.data.list;
            this.total = res.data.data.total;
          }else{
            this.$alert(res.data.message, '提示')
          }
        });
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.loadPics();
    },
    handleAvatarSuccess(res, file) {
      this.cuser.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>
<style scoped>
.namerow {
  font-weight: bold;
  font-size: 1.1em;
  color: #a33;
  margin-bottom: 20px;
}
.descrow {
  margin-bottom: 20px;
  color: #888;
}
.bzrow {
  columns: #666;
  font-size: 0.9em;
}
</style>
